<template>
  <div class="section-box">
    <FrameLayout v-show="showPage === 'index'">
      <template v-slot:left>
        <Frame title="数字化预演" style="height: 100%" :menuName="'yuyan'">
          <!-- <template v-slot:right></template> -->
          <template v-slot:body>
            <div>
              <div class="form_Rehearsal">
                <div class="btnCjfa_ue" @click="SchemeDetailsBtn()"></div>
                <el-form ref="ruleForm" label-width="auto" label-position="left">
                  <el-form-item label="预演类别">
                    <el-radio-group v-model="ruleForm.rehearsalType" class="margtop5">
                      <el-radio label="1" @click.native.prevent="rehearsalTypechange('1')">预报预演
                      </el-radio>
                      <el-radio label="2" @click.native.prevent="rehearsalTypechange('2')">历史复盘
                      </el-radio>
                      <el-radio label="3" @click.native.prevent="rehearsalTypechange('3')">极端情景
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="隐患类别">
                    <el-radio-group v-model="ruleForm.hiddendangertype" class="margtop5">
                      <el-radio label="1" @click.native.prevent="hiddendangertypechange('1')">桥梁堵水
                      </el-radio>
                      <el-radio label="2" @click.native.prevent="hiddendangertypechange('2')">工程溃决
                      </el-radio>
                      <el-radio label="3" @click.native.prevent="hiddendangertypechange('3')">洪水顶托
                      </el-radio>
                      <!-- <el-radio label="2" :disabled="true">工程溃决
                      </el-radio>
                      <el-radio label="3" :disabled="true">洪水顶托
                      </el-radio> -->
                    </el-radio-group>
                  </el-form-item>
                </el-form>
                <el-form ref="ruleForm" label-width="auto" label-position="top">
                  <el-form-item label="生成时间">
                    <el-date-picker v-model="TimeShengcheng" prefix-icon="el-icon-date" type="datetimerange"
                      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%"
                      format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :default-time="[timebeg, timebeg]"
                      @change="TimeShengchengChange" />
                  </el-form-item>
                  <el-form-item label="预演时间">
                    <el-date-picker v-model="TimeYuyan" prefix-icon="el-icon-date" type="datetimerange"
                      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%"
                      format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :default-time="[timebeg, timebeg]"
                      @change="TimeYuyanChange" />
                  </el-form-item>
                </el-form>
              </div>
              <div class="collapse_table">
                <ul>
                  <li v-for="(item, index) in listYudata" :key="index" :class="{ activeList: selectNum == index }"
                    @click="ListStyle(item, index)">
                    <div class="collapse_table_title">
                      <p :title="item.name">{{ item.name }}</p>
                      <span v-if="item.calculationState == -1" class="errorColor">计算失败</span>
                      <span v-if="item.calculationState == 0" class="noColor">未计算</span>
                      <span v-if="item.calculationState == 1" class="orangeColor">计算中</span>
                      <span v-if="item.calculationState == 2" class="greenColor">计算完成</span>
                    </div>
                    <p> <img src="@/assets/uemap/kuang1.png" width="8" height="8"> 预演类别：<span>{{ item.rehearsalType
                    }}</span></p>
                    <p>
                      <img src="@/assets/uemap/kuang1.png" width="8" height="8">
                      隐患类型：
                      <span>{{ item.hiddendangertype || '无' }}</span>
                    </p>
                    <p> <img src="@/assets/uemap/kuang1.png" width="8" height="8"> 预演时段：<span
                        style="letter-spacing:-1px">{{
                          item.predictionStart | dateformat
                        }} - {{ item.predictionEnd | dateformat }}</span></p>
                    <p style="border-bottom:1px solid #335875"> <img src="@/assets/uemap/kuang1.png" width="8" height="8">
                      生成时间：<span>{{ item.createDDate | dateformat }}</span></p>
                    <div class="btnCjfa_cur">
                      <!-- <span class="btnCjfa" @click.stop="getDeleteRehearsal(item)"> -->
                      <span class="btnCjfa" @click.stop="openTipDialog(item)">
                        <img src="@/assets/uemap/Rehearsal_sc.png" width="84" height="30">
                      </span>
                      <span v-if="item.calculationState == 0" class="btnCjfa" @click.stop="CalcRehearsalSchemeli(item)">
                        <img src="@/assets/uemap/Rehearsal_js.png">
                      </span>
                      <span v-if="item.calculationState == 2" class="btnCjfa" @click.stop="loadPlanPage(item, index)">
                        <img src="@/assets/uemap/Rehearsal_fa.png">
                      </span>
                    </div>
                  </li>
                  <infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
                    <span slot="no-more"> &nbsp; </span>
                    <template v-if="listYudata.length <= 0">
                      <div slot="no-results" class="noData">当前无预演</div>
                    </template>
                    <div v-else slot="no-results">&nbsp;</div>
                  </infinite-loading>
                </ul>
              </div>
            </div>
          </template>
        </Frame>
      </template>
      <template v-slot:center>
        <!-- <div class="btn-left-top" :class="floleft=='2'?'btnLeftTops':''">
          <div class="btn" :class="pageState.yubaoFenXi_YMFW ? 'active' : ''"  @click="change_HS_YMFW">淹没范围</div>
          <div class="btn" :class="pageState.yubaoFenXi_FXD ? 'active' : ''" @click="changeFXD">风险点</div>
        </div> -->

        <!-- <div  v-if="pageState.yuYan_Load==false && $route.path === '/Rehearsal'" class="RehearsalRiskLegend">
          <div class="btn-row">
            <div class="anchor">
              <div class="slot">
                <template>
                  <div class="btnNew" :class="pageState.yubaoFenXi_YMFW ? 'activeNew' : ''" @click="change_HS_YMFW"> 淹没范围
                  </div>
                  <div class="btnNew" :class="pageState.yubaoFenXi_FXD ? 'activeNew' : ''" @click="changeFXD">风险点 </div>
                </template>
              </div>
            </div>
          </div>
        </div> -->
      </template>
      <template v-slot:right>
        <Frame v-if="showCompontframe" :panel-stretch="'rights'" :menuName="'yuyan'" :title="nameInfoTop + '方案详情'"
          style="height: 100%">
          <template v-slot:body>
            <SchemeDetails v-if="showCompont == 2" ref="yyfaxqfxpg" :detailsd="detailsd" :hasBtn="true" />
          </template>
        </Frame>
      </template>
    </FrameLayout>

    <!-- <Dlgdiv
      v-if="this.$store.getters.dlgParams.name=== 'RainInfo'"
      mask
      class="MeasuredDlgStyle"
    >
      <template v-slot:title> 站点详情 </template>
      <template v-slot:body>
        <MeasuredDlg />
      </template>
    </Dlgdiv> -->
    <dataTab v-if="SceneMode == false" />
    <LoadPlanPage v-if="showPage === 'loadPlanPage'" :nameInfo="nameInfo" />

    <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'floodDlog'" mask class="MeasuredDlgStyle">
      <template v-slot:title> 淹没分析 </template>
      <template v-slot:body>
        <floodDlog />
      </template>
    </Dlgdiv>
    <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'RainInfo'" mask class="MeasuredDlgStyle">
      <template v-slot:title> 站点详情 </template>
      <template v-slot:body>
        <MeasuredDlg />
      </template>
    </Dlgdiv>
    <Dlgdivv v-if="this.$store.getters.dlgParams.name === 'transferList'" mask :title="true" class="MeasuredDlgStyle">
      <!-- <Dlgdivv mask :title="true" class="MeasuredDlgStyle"> -->
      <template v-slot:title> 转移人员清单 </template>
      <template v-slot:body>
        <TransferList />
      </template>
    </Dlgdivv>
    <Dlgdivv v-if="this.$store.getters.dlgParams.name === 'DLGYYFXD'" mask class="MeasuredDlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <dlgyyfxd :list-styleobj="ListStyleobj" :tablist="[6]" />
      </template>
    </Dlgdivv>
    <Dlgdivv v-if="this.$store.getters.dlgParams.name == 'FZCCuZINFO'" mask class="MeasuredDlgStyle">
      <!-- <template v-slot:title>详情</template> -->
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <!-- <Dlgyyfxd :listStyleobj="ListStyleobj" :tablist="[]" /> -->
        <!-- <Dlgyyfxd :tablist="tablists" /> -->
        <Dlgyyfxd :listStyleobj="ListStyleobj" :tablist="[6]" />
      </template>
    </Dlgdivv>
    <!-- 创建方案 -->
    <!-- <Dlgdiv v-if="this.$store.getters.dlgParams.name=== 'RainInfo'" mask class="MeasuredDlgStyle" > -->
    <DlgdivCreat v-if="createDialogShow" mask class="CreateDlgStyle">
      <template v-slot:title> 创建预演方案 </template>
      <template v-slot:body>
        <!-- <MeasuredDlg /> -->
        <Establish :filewswscd="ruleForm.wswscd" @fatherFunction="fatherFunction" style="height: 880px;" />
      </template>
    </DlgdivCreat>
    <!-- 预演提示 -->
    <DlgdivTip v-if="RtipDialogShow" :ismask="true">
      <template v-slot:title> 预演提示 </template>
      <template v-slot:body>
        <div class="body-inner">
          <p class="contant">是否确定预演此方案？</p>
        </div>
      </template>
      <template v-slot:footer>
        <div class="btn-row">
          <div class="btn" @click="RcancelTipDialog">
            <img src="@/assets/dialog/tipCancel.png" alt="">
          </div>
          <div class="btn" @click="RconfirmTipDialog">
            <img src="@/assets/dialog/tipSubmit.png" alt="">
          </div>
        </div>
      </template>
    </DlgdivTip>
    <!-- 删除提示 -->
    <DlgdivTip v-if="tipDialogShow" :ismask="true">
      <template v-slot:title> 删除提示 </template>
      <template v-slot:body>
        <div class="body-inner">
          <p class="contant">确定要删除该方案吗？</p>
        </div>
      </template>
      <template v-slot:footer>
        <div class="btn-row">
          <div class="btn" @click="cancelTipDialog">
            <img src="@/assets/dialog/tipCancel.png" alt="">
          </div>
          <div class="btn" @click="confirmTipDialog">
            <img src="@/assets/dialog/tipSubmit.png" alt="">
          </div>
        </div>
      </template>
    </DlgdivTip>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Establish from '@/views/main/Rehearsal/establish.vue'
import SchemeDetails from '@/views/main/Rehearsal/schemeDetails.vue'
import {
  GetRLList,
  DeleteRehearsal,
  CalcRehearsalScheme,
  GetRehearsalState
} from '@/api/xuna.js'
import hiddenDanger from '../../../map/cesium/mixins/hiddenDanger'
import LoadPlanPage from './LoadPlanPage'
import floodDlog from '@/views/components/floodDlog.vue'

import MeasuredDlg from '@/views/components/MeasuredDlg.vue'
import TransferList from '@/views/main/Rehearsal/transferList.vue'
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
import dataTab from '@/views/main/Rehearsal/components/dataTab.vue'

export default {
  name: 'Risk',
  components: {
    Establish,
    SchemeDetails,
    LoadPlanPage,
    floodDlog,
    MeasuredDlg,
    TransferList,
    'dlgyyfxd': () => import('@/views/components/dlgyyfxd.vue'),
    dataTab

  },
  mixins: [hiddenDanger],
  data() {
    return {
      nameInfo: '',//方案名称
      floleft: '3',
      showPage: 'index',
      fullscreenLoadingIndex: false,
      RehearsalState: '0',
      showCompontframe: false,
      detailsd: '',
      timebeg: this.$moment().format('HH:mm:ss'),
      ruleForm: {
        page: 1,
        limit: 10,
        wswscd: this.$store.getters.basin,
        rehearsalType: '', // 预演类别 1预报预演、2历史复盘、3极端情景
        hiddendangertype: '', // 隐患类别 1桥梁堵水、2工程溃决、3洪水顶托
        createStart: this.$moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm'), // 生成开始时间
        // createEnd: this.$moment().format('YYYY-MM-DD HH:mm'), // 生成结束时间
        createEnd: this.$moment().subtract(-1, 'day').format('YYYY-MM-DD HH:mm'), // 生成结束时间
        rehearsalStart: this.$moment().subtract(8, 'hour').format('YYYY-MM-DD HH:mm'), // 预演开始时间
        rehearsalEnd: this.$moment().format('YYYY-MM-DD HH:mm')// 预演结束时间
      },
      selectNum: '-1',
      showCompont: '2',
      // TimeShengcheng: [this.$moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm'), this.$moment().format('YYYY-MM-DD HH:mm')],
      TimeShengcheng: [this.$moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm'), this.$moment().subtract(-1, 'day').format('YYYY-MM-DD HH:mm')],
      TimeYuyan: [this.$moment().subtract(8, 'hour').format('YYYY-MM-DD HH:mm'), this.$moment().format('YYYY-MM-DD HH:mm')],
      listYudata: [], // 列表
      nameInfoTop: '',
      planCurrSel: {},
      loadId: '',
      ListStyleobj: {
        'stTime': '2021-06-08 00:00',
        'enTime': '2021-06-11 23:59',
        // 'stTime': '',
        // 'enTime': '',
      },
      tablists: [],
      createDialogShow: false, //创建预演方案弹窗
      tipDialogShow: false, //删除弹窗
      faId: undefined, //方案id
      RtipDialogShow: false, //预演提示
      RehearsalArry: {},//选中预演方案
    }
  },
  computed: {
    SceneMode() {
      return this.$store.getters.SceneMode
    },
    basin() {
      return this.$store.getters.basin
    },
    pageState() {
      return this.$store.getters.pageState
    },
    leftFold() {
      return this.$store.getters.leftFold
    }

  },
  watch: {
    // leftFold 左边是否展开
    leftFold: {
      immediate: true,
      handler: function (val, oldVal) {
        this.floleft = val ? '1' : '2'
      }
    },
    basin: {
      handler: function (name) {
        this.$nextTick(() => {
          this.ruleForm.wswscd = name
          this.resetList()
        })
      },
      immediate: true
    },
    showPage: {
      handler: function (name) {
        if (name === 'index') {
          this.$store.getters.pageState.yuYan_Load = false
        }
        if (name === 'loadPlanPage') {
          this.$store.getters.pageState.yuYan_Load = true
          this.$store.dispatch('rightFold', true)
        }
      },
      immediate: true
    }
  },
  beforeDestroy() {
    this.$eventBus.$emit('DMXRehearsalID', '')
    this.$store.getters.pageState.planId = '';
    this.$eventBus.$off('FZCINFO');
    var param = {
      "eventName": "PreviewEnd",  // 事件名称
      "previewCode": this.planID      // 预演编号
    }
    callUIInteraction("Web_PreviewEvent", param);
    var param = {
      "basin": this.basin,
    }
    callUIInteraction("Web_RehearsalFxpgLeave", param);
    this.$store.commit("YUANCALCULATIONSTATE", undefined); //方案状态
  },
  created() {
    this.$eventBus.$emit('DMXRehearsalID', '')
    this.$store.dispatch('rightFold', true);
    let thirdPageUser = this.$store.getters.thirdPageUser;
    if (thirdPageUser.dtBegin) {
      this.TimeYuyan = [thirdPageUser.dtBegin, thirdPageUser.dtEnd];
      this.ruleForm.rehearsalStart = thirdPageUser.dtBegin;
      this.ruleForm.rehearsalEnd = thirdPageUser.dtEnd;
    }
  },
  mounted() {
    this.$eventBus.$on('FZCINFO', res => {
      let ind = this.selectNum;
      if (ind != '-1') {
        this.tablists = ['5']
      } else {
        this.tablists = []
      }
      let params = {
        'Ewcode': res.ADCD,
        'strBegin': this.ListStyleobj.stTime,
        'strEnd': this.ListStyleobj.enTime,
      };
      this.$store.getters.dlgParams.params = params;
      this.$store.getters.dlgParams.name = 'FZCCuZINFO'
      console.log('站点详情', this.$store.getters.dlgParams.name);
    })

  },
  methods: {
    //开始预演
    loadPlanPage(item) {
      this.RtipDialogShow = true;
      this.RehearsalArry = item;
    },
    //确定预演
    RconfirmTipDialog() {
      this.showCompont = false
      this.showCompontframe = false
      var _this = this;
      setTimeout(() => {
        _this.showPage = 'loadPlanPage'
        _this.$store.getters.pageState.RightYuyan = '78%'
        _this.$store.getters.pageState.goToYuyan = true;
        _this.$store.getters.pageState.planId = _this.RehearsalArry.id
        _this.$eventBus.$emit('DMXRehearsalID', _this.RehearsalArry.id)
        _this.nameInfo = _this.RehearsalArry.name
        _this.planCurrSel = _this.RehearsalArry
        _this.RtipDialogShow = false;
        _this.$nextTick(function () {
          //开始预演
          var param = {
            "basin": _this.basin,
            "eventName": "PreviewStart",  // 事件名称
            "previewCode": _this.RehearsalArry.id        // 预演编号
          }
          callUIInteraction("Web_PreviewEvent", param);
          _this.$eventBus.$emit('schemeFxId', _this.RehearsalArry.id, _this.RehearsalArry.name, _this.RehearsalArry.predictionStart, _this.RehearsalArry.predictionEnd)
        })
      }, 200);

    },
    //取消预演
    RcancelTipDialog() {
      this.RtipDialogShow = false;
    },
    fatherFunction(data) {
      this.showCompontframe = false
      this.$nextTick(function () {
        this.showCompontframe = true
      })
      this.createDialogShow = false
      this.$store.dispatch('rightFold', true)
      if (data) {
        this.resetList()
      }
    },
    TimeShengchengChange(val) {
      this.ruleForm.createStart = val[0]
      this.ruleForm.createEnd = val[1]
      this.TimeShengcheng = val
      this.resetList()
    },
    TimeYuyanChange(val) {
      alert(val)
      this.ruleForm.rehearsalStart = val[0]
      this.ruleForm.rehearsalEnd = val[1]
      this.TimeYuyan = val
      this.resetList()
    },
    rehearsalTypechange(e) {
      e === this.ruleForm.rehearsalType ? (this.ruleForm.rehearsalType = '') : (this.ruleForm.rehearsalType = e)
      this.resetList()
    },
    hiddendangertypechange(e) {
      e === this.ruleForm.hiddendangertype ? (this.ruleForm.hiddendangertype = '') : (this.ruleForm.hiddendangertype = e)
      this.resetList()
    },
    // 加载更多
    infiniteHandler($state) {
      this.getGetRLList($state)
    },
    // 重置
    resetList() {
      this.ruleForm.page = 1
      this.listYudata = []
      this.$nextTick(() => {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
      })
    },
    SchemeDetailsBtn() {
      this.$eventBus.$emit('HDState', { action: '创建方案', data: null })
      this.$store.dispatch('rightFold', false)
      this.$store.getters.pageState.yuYanInfoType = 'FAXQ'
      this.createDialogShow = true
      // this.showCompont = 1
      this.selectNum = -1
      // this.showCompontframe = true
    },
    closeDialog() {
      this.createDialogShow = false
    },
    ListStyle(item, index) {
      this.ListStyleobj = {
        'stTime': this.$moment(item.predictionStart).format('YYYY-MM-DD HH:mm'),
        'enTime': this.$moment(item.predictionEnd).format('YYYY-MM-DD HH:mm')
      }
      this.$store.getters.pageState.RightYuyan = '30%'
      if (item.calculationState === 2) {
        this.nameInfoTop = item.name
        this.showCompont = 2
        this.showCompontframe = true
        this.selectNum = index
        this.planCurrSel = item
        this.loadId = item.id
        this.$store.getters.pageState.planId = item.id
        this.$nextTick(function () {
          this.$eventBus.$emit('DMXRehearsalID', item.id)
          this.$eventBus.$emit('schemeFxId', item.id, item.name, this.ListStyleobj.stTime, this.ListStyleobj.enTime)
        })
        this.$store.dispatch('rightFold', true)
      } else {
        this.showCompontframe = false
        this.selectNum = index
      }
      // 保存所选预演方案的状态
      this.$store.commit("YUANCALCULATIONSTATE", item.calculationState);
    },
    // 获取列表
    getGetRLList($state) {
      this.fullscreenLoadingIndex = true
      GetRLList(this.ruleForm).then((res) => {
        this.fullscreenLoadingIndex = false
        if (res.isSuccess) {
          this.showCompont == 1 ? this.showCompont = 1 : this.showCompontframe = false
          this.selectNum = -1
          if ($state) {
            if (!res.data.length > 0) {
              this.planCurrSel = {}
              this.showCompont == 1 ? '' : this.$store.dispatch('rightFold', true)
              $state.complete() // 加载完成的状态
              this.$store.getters.pageState.planId = '';
            } else {
              const arr = res.data
              // this.listYudata = []
              this.listYudata = [...this.listYudata, ...arr]
              // console.log('数字化预演数',this.listYudata);

              if (res.data.length < this.ruleForm.limit) {
                $state.complete() // 加载完成的状态
              } else {
                $state.loaded() // 加载中的状态
              }
              if (res.data[0].calculationState === 2 && this.ruleForm.page === 1) {
                this.selectNum = 0
                this.planCurrSel = res.data[0]
                this.ListStyleobj = {
                  'stTime': this.$moment(this.planCurrSel.predictionStart).format('YYYY-MM-DD HH:mm'),
                  'enTime': this.$moment(this.planCurrSel.predictionEnd).format('YYYY-MM-DD HH:mm')
                }
                // DOM 还没有更新
                this.$nextTick(function () {
                  // DOM 现在更新了
                  this.$eventBus.$emit('schemeFxId', res.data[0].id, res.data[0].name, this.ListStyleobj.stTime, this.ListStyleobj.enTime)
                })
                this.loadId = res.data[0].id
                this.$store.getters.pageState.planId = res.data[0].id
                this.nameInfoTop = res.data[0].name
                this.showCompont = 2
                this.showCompontframe = true
                this.$store.dispatch('rightFold', false)
              }
              
              // 保存所选预演方案的状态
              this.$store.commit("YUANCALCULATIONSTATE", res.data[0].calculationState);
            }
            
            this.ruleForm.page++
          } else {
            this.listYudata = res.data
          }
        }
      }).catch(err => {//接口报错  进行处理，右边详情面板关闭 图例移到最右边
        this.fullscreenLoadingIndex = false;
        this.showCompontframe = false;
        this.listYudata = [];
        this.$store.dispatch('rightFold', true);
        $state.complete(); // 加载完成的状态

      })
    },
    // 删除
    getDeleteRehearsal(item) {
      this.$confirm('确定删除此方案?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        //  customClass:'cuonfirmClass',
        type: 'warning'
      }).then(() => {
        DeleteRehearsal({ id: item.id }).then((res) => {
          //  console.log(res)
          if (res.isSuccess) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.resetList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 计算
    CalcRehearsalSchemeli(item) {
      this.listYudata = this.listYudata.map(function (v) {
        return {
          ...v,
          calculationState: item.id === v.id ? '1' : v.calculationState
        }
      })
      CalcRehearsalScheme({ RehearsalID: item.id }).then((res) => {
        if (res.isSuccess) {
          this.getGetRehearsalState(item.id)
        }
      })
    },
    getGetRehearsalState(id) {
      GetRehearsalState({ ID: id }).then((res) => {
        this.RehearsalState = res.data
        if (res.data !== 2 || !res.isSuccess) {
          setTimeout(() => {
            this.getGetRehearsalState(id)
          }, 10000)
        } else {
          this.$message({
            type: 'success',
            message: '计算成功'
          })
          this.resetList()
        }
      })
    },
    // 淹没范围
    change_HS_YMFW() {
      this.pageState.yubaoFenXi_YMFW = !this.pageState.yubaoFenXi_YMFW
      this.$eventBus.$emit('EB_HS_BTN_YMFW', this.pageState.yubaoFenXi_YMFW)
    },
    // 风险点
    changeFXD() {
      this.pageState.yubaoFenXi_FXD = !this.pageState.yubaoFenXi_FXD
      this.$eventBus.$emit('EB_HS_BTN_YXD', this.pageState.yubaoFenXi_FXD)
    },
    // 删除提示操作
    // 打开
    openTipDialog(item) {
      this.faId = item.id
      this.tipDialogShow = true
    },
    // 确认删除方案
    confirmTipDialog() {
      DeleteRehearsal({ id: this.faId }).then((res) => {
        //  console.log(res)
        if (res.isSuccess) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.resetList()
        }
      }).catch(() => { })

      this.resetList()
      this.tipDialogShow = false
    },
    // 取消删除方案
    cancelTipDialog() {
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
      this.tipDialogShow = false
    },

    // 关闭删除提示弹窗
    closeTipDialog() {
      this.tipDialogShow = false
      this.RtipDialogShow = false
    },
  }
}
</script>

<style lang="less" scoped>
.MeasuredDlgStyle {
  width: 70% !important;
  height: 700px !important;
  left: 15%;
  top: 10%
}

.DlgStyle {
  width: 70% !important;
  height: 600px !important;
  left: 15%;
  top: 3%
}

.CreateDlgStyle {
  width: 540px !important;
  height: 880px !important;
  left: 51%;
  top: 2%
}

.section-box {
  width: 100%;
  height: 100%;
}

.top_llfxChart {
  height: 300px;
  margin-bottom: 10px;
}

.tableBox {
  height: calc(100% - 320px);

  .collapse_div {
    height: calc(100% - 20px);
    overflow: auto;
  }
}

.form_Rehearsal {


  .el-form-item {
    margin-bottom: 5px;

    /deep/.el-radio-group {
      width: 100%;
      display: flex;
      justify-content: space-between;

      label {
        width: 30%;
        margin-right: 0;
      }
    }
  }

  /deep/ .el-radio-button__inner {
    padding: 10px 20.5px !important;
  }

  /deep/.is-disabled .el-radio__inner {
    background-color: transparent;
  }
}

.collapse_table>ul li .collapse_table_title {
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #00A0DB;

  p {
    width: 70%;
    color: #FFE957;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  span {
    height: 20px;
    line-height: 20px;
    margin-right: 2px;
    letter-spacing: 2px;
    font-size: 14px;
    font-family: MePangMenZhengDao;
    clip-path: polygon(22% 0, 80% 0%, 100% 0, 97% 100%, 80% 100%, 20% 100%, 0 100%, 0 31%);
  }

  span:before {
    border-radius: 4px;
    content: "";
    float: left;
    height: 6px;
    margin: 6px 6px 0 0;
    width: 6px;
  }
}

.orangeColor {
  color: #E3D400;
}

.orangeColor:before {
  background: #E3D400;
}

.greenColor {
  color: #00E344;
}

.greenColor:before {
  background: #00E344;
}

.noColor {
  color: #989595;
}

.noColor:before {
  background: #989595;
}

.errorColor {
  color: #db8282;
}

.errorColor:before {
  background: #db8282;
}

.btnCjfa_cur {
  text-align: right;
  padding-top: 6px;
  border-top: 1px solid #00A0DB;

  .btnCjfa {
    padding: 5px 10px;
    top: 0;
  }
}
</style>
<style lang="scss" scoped>
.btn-center-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  bottom: 0px;
  display: flex;
  align-items: center;

  .btn {
    white-space: nowrap;
    height: 39px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: rgba(14, 81, 133, 0.61);
    border: 1px solid #0e5185;

    &:hover,
    &.active {
      box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
    }

    &.disabled {
      background: #000000;
      color: #cccccc;
      pointer-events: none;
    }
  }
}

.margtop5 {
  margin-top: 5px;
}

.RehearsalRiskLegend {
  position: absolute;
  top: 95px;
  right: 1400px;
  z-index: 2;
  //min-width:300px;

  .anchor {
    // width: 0px;
    // position: absolute;
    // left: -10px;

    .slot {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      background: rgba(14, 81, 133, 0.61);
      ;

      // padding: 5px;
      .btnNew {
        width: 100px;
        height: 36px;

        text-align: center;
        font-family: "MePangMenZhengDao";
        letter-spacing: 2px;
        font-size: 18px;
        color: #fff;
        background: url('~@/assets/imgNew/btnbg.png') no-repeat;
        background-size: 100% 100%;
        margin-bottom: 10px;
        padding-top: 11px;

      }

      .active {
        border: 1px solid #007272;
        box-shadow: inset 0px 0px 15px 0px #007272;
      }

      .activeNew {
        background: url('~@/assets/imgNew/btnactbg.png') no-repeat;
        background-size: 100% 100%;
      }

      .dis {
        background: rgba(112, 112, 112, 0.61);
        pointer-events: none;
        /*border: 1px solid #F88;*/
        cursor: no-drop;
        color: #8b8b8b;
        border: 1px solid #707070;
        /*cursor:not-allowed*/
        /*border: 1px solid #007272;*/
        /*box-shadow: inset 0px 0px 15px 0px #007272;*/
      }

      .ladarGroup {
        position: absolute;
        right: 0;
        top: 35px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }
    }
  }

  .btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    // background: rgba(14, 81, 133, 0.61);
    padding: 5px 10px;

    img {
      width: 67px;
      height: 39px;

    }

  }

  .content {
    position: relative;
    height: auto;
    background: rgba(0, 46, 131, 0.75);

  }

  .contentfixdv {
    position: fixed;
    width: 233px;
    top: 60px;
    right: 23px;
  }

  .contentfixdv1 {
    position: fixed;
    width: 233px;
    top: 60px;
    right: 23px;

  }
}

.btn-left-top {
  position: absolute;
  width: auto;
  // top: 140px;
  // top:50px;
  //top:0px;
  top: 95px;
  padding: 5px 10px;
  z-index: 2;

  .btn {
    // white-space: nowrap;
    // display: flex;
    // align-items: center;
    // padding: 5px 10px;
    // background: rgba(14, 81, 133, 0.61);
    // border: 1px solid #0e5185;
    display: inline-block;
    width: 82px;
    height: 36px;
    // line-height: 36px;
    padding-top: 11px;
    text-align: center;
    font-family: "MePangMenZhengDao";
    letter-spacing: 2px;
    font-size: 18px;
    color: #fff;
    background: url('~@/assets/imgNew/btnbg.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
    cursor: pointer;

    &:hover,
    &.active {
      // box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
      background: url('~@/assets/imgNew/btnactbg.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.btnLeftTops {
  position: absolute;
  left: 1.7%;
}

.body-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .content {

    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #D1E8ED;
  }


}
</style>
